/* CSS Document */
*{margin: 0px;padding: 0px;}
body{font-family: Arial;color: #333; }
html,body{max-width:750px; margin: 0 auto;height: 100%;font-size: 12px;}
/* html{font-size:12px!important;} */
div,table,td{margin: 0px;padding: 0px;}
ul,li{list-style:none}
img, a img,textarea{border: 0;}
.clearfix:after{display:block;height:0;clear:both;visibility:hidden}
* html .clearfix{height:1%}
*+html .clearfix{min-height:1%}
img,a img{border:none;margin:0;padding: 0;}
/*---图片隐藏弹窗--*/
img[src=""],img:not([src]){opacity:0;}
em,b,i{font-style:normal}
a{text-decoration:none; color:#333}
a:focus{outline: none;}
input,textarea{font-family: Arial;outline: none;}
input,input[type="submit"], input[type="reset"], input[type="button"], button ,div{-webkit-appearance: none;}
a,button,input,textarea,label,li,em,b,div,li,i,div{-webkit-tap-highlight-color:rgba(255,0,0,0); font-style: normal;}
input:-moz-placeholder,textarea:-moz-placeholder{color: #aaa;}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{color: #aaa;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color: #aaa;}
input[type="text"],input[type="email"],input[type="search"],input[type="password"] ,textarea{-webkit-appearance: none;
-moz-appearance: none; /* mobile firefox too! */}
/* 清除浮动 */
.clear::after{content:'';display:block;height: 0;clear: both;overflow: hidden;visibility: hidden;}
/* 隐藏 */
.hidden{display:none;}
/*滚动条设置开始*/
::-webkit-scrollbar/*整体部分*/{width:2px;height:10px;display: none;}
::-webkit-scrollbar-track/*滑动轨道*/{-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 0px;background: #fff;}
::-webkit-scrollbar-thumb/*滑块*/{border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.2);}
::-webkit-scrollbar-thumb:hover/*滑块效果*/{border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
background: rgba(0,0,0,0);}
/*加载动画*/
.loaders{width: 100%; box-sizing: border-box; height: 100%; position: fixed; top: 0; display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; background:rgba(0,0,0,.8);z-index: 1000}
.loaders .loader{box-sizing: border-box; display: flex; display: -webkit-flex; flex: 0 1 auto;flex-direction: column;flex-grow: 1;flex-shrink: 0;flex-basis: 25%; width: 25%;align-items: center;justify-content: center;}
.loader-inner{}
@-webkit-keyframes ball-spin-fade-loader{50%{opacity: 0.3; -webkit-transform: scale(0.4);transform: scale(0.4);} 100%{opacity: 1;-webkit-transform: scale(1); transform: scale(1);} }
@keyframes ball-spin-fade-loader{50%{opacity: 0.3;-webkit-transform: scale(0.4); transform: scale(0.4);} 100%{opacity: 1;-webkit-transform: scale(1); transform: scale(1);} }
.ball-spin-fade-loader{position: relative; top: -10px;left: -10px;}
.ball-spin-fade-loader > div:nth-child(1){top: 25px;left: 0;-webkit-animation: ball-spin-fade-loader 1s -0.96s infinite linear; animation: ball-spin-fade-loader 1s -0.96s infinite linear;}
.ball-spin-fade-loader > div:nth-child(2){top: 17.04545px;left: 17.04545px;-webkit-animation: ball-spin-fade-loader 1s -0.84s infinite linear;animation: ball-spin-fade-loader 1s -0.84s infinite linear;}
.ball-spin-fade-loader > div:nth-child(3){top: 0; left: 25px;-webkit-animation: ball-spin-fade-loader 1s -0.72s infinite linear; animation: ball-spin-fade-loader 1s -0.72s infinite linear;}
.ball-spin-fade-loader > div:nth-child(4){top: -17.04545px;left: 17.04545px;-webkit-animation: ball-spin-fade-loader 1s -0.6s infinite linear; animation: ball-spin-fade-loader 1s -0.6s infinite linear;}
.ball-spin-fade-loader > div:nth-child(5){top: -25px; left: 0; -webkit-animation: ball-spin-fade-loader 1s -0.48s infinite linear; animation: ball-spin-fade-loader 1s -0.48s infinite linear;}
.ball-spin-fade-loader > div:nth-child(6){top: -17.04545px;left: -17.04545px;-webkit-animation: ball-spin-fade-loader 1s -0.36s infinite linear;animation: ball-spin-fade-loader 1s -0.36s infinite linear;}
.ball-spin-fade-loader > div:nth-child(7){top: 0; left: -25px; -webkit-animation: ball-spin-fade-loader 1s -0.24s infinite linear; animation: ball-spin-fade-loader 1s -0.24s infinite linear;}
.ball-spin-fade-loader > div:nth-child(8){top: 17.04545px;left: -17.04545px;-webkit-animation: ball-spin-fade-loader 1s -0.12s infinite linear; animation: ball-spin-fade-loader 1s -0.12s infinite linear;}
.ball-spin-fade-loader > div{background-color: #fff; width: 15px;height: 15px; border-radius: 100%;margin: 2px;-webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute;}
.base{position: relative;min-height: 100vh;background: #f4f4f4;overflow-x: hidden;
	/*background: linear-gradient(to right, #49040d, #860614,#a40615,#860614,#49040d);*/
	background-repeat: repeat-y;
	background-size: 100% 100%;
}

.base.game{
	background: url(../images/bg.png);
	background-repeat: repeat-y;
	background-size: 100% 100%;
}
.base.game .top{
	display: flex;
	justify-content: space-between;
	width: 94%;
	margin: 5px 3%;
}
.base.game .top .fen{
	width: 30%;
	font-size: 0;
	position: relative;
}
.base.game .top .fen img{
	position: relative;
	width: 100%;
}
.base.game .top .fen span{
	position: absolute;
    width: 30%;
    display: block;
    color: #ff9600;
    font-size: 2rem;
    line-height: 7vw;
    top: calc(50% - 3vw);
    left: 45%;
    font-weight: bold;
	text-align: right;
	white-space: nowrap;
}
.base.game .top .miao{
	width: 30%;
	font-size: 0;
	position: relative;
}
.base.game .top .miao img{
	width: 100%;
}
.base.game .top .miao span{
	position: absolute;
    width: 30%;
    display: block;
    color: #f95b66;
    font-size: 2rem;
    line-height: 8vw;
    top: calc(50% - 3vw);
    left: 45%;
    font-weight: bold;
	text-align: right;
	white-space: nowrap;
}
.base.game .area{
	background: #FFF;
    border-radius: 8px;
    padding: 5%;
    margin: 20px 5%;
}
.base.game .area .q .num{
	position: absolute;
    left: -5px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
	justify-content: center;
	
}
.base.game .area .q .value{
	padding-left: 10px;
	font-size: 1.4rem;
	color: #333;
	position: relative;
}
.base.game .area .answers{
	margin: 10px 0;
}
.base.game .area .q .thumb{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.base.game .area .q .thumb img{
	width: 100%;
	margin: 10px 0;
}
.base.game .area .answers .item{
	padding: 5%;
    background: #F2F2F2;
    border-radius: 15px;
    margin: 0px 0 15px;
    font-size: 1.2rem;
	margin-right: 10px;
	position: relative;
}

.base.game .area .answers .item:nth-child(odd)
{ animation: left 0.8s 0.2s   backwards ; -webkit-animation: left 0.8s 0.2s  backwards ; }

.base.game .area .answers .item:nth-child(even)
{ animation: right 0.8s 0.3s   backwards ; -webkit-animation: right 0.8s 0.3s  backwards ; }

@-webkit-keyframes right {
    0% {transform: translateX(100%);-webkit-transform:translateX(100%);}
    100% { transform: translateX(0%);-webkit-transform:translateX(0%);}
}
@-webkit-keyframes left {
    0% {transform: translateX(-100%);-webkit-transform:translateX(-100%);}
    100% { transform: translateX(0%);-webkit-transform:translateX(0%);}
}
	
.base.game .area .answers .item .name{
	position: absolute;
	text-align: center;
	width: 30px;
}
.base.game .area .answers .item .value{
	display: block;
    padding-left: 30px;
}
.base.game .area .answers .item.choose{
	filter: invert(0.1);
	animation: fade 0.5s ease-in-out;
}
@keyframes fade {
	0%{
		opacity: 0.7;
	}
	100%{
		opacity: 1;
	}
}
.base.game .area .answers .item.active::after{
	content: "";
    background: url(../images/icon-right.png);
    background-size: 100% 100%;
    height: calc(92px / 2 );
    width: calc(96px / 2);
    position: absolute;
    right: 0;
    top: -24%;
}

.base.game .area .answers .item.deactive::after{
	content: "";
    background: url(../images/icon-wrong.png);
    background-size: 100% 100%;
    height: calc(92px / 2 );
    width: calc(96px / 2);
    position: absolute;
    right: 0;
    top: -24%;
}



/*page04 转盘*/
.page04_bg01{ position: fixed; bottom: 0; width: 100%; display: block; left: 0}
.page04_bg02{ position: fixed; top: 0; width: 100%; display: block; left: 0}
.page04_title{position: fixed;width:84%;  display: block;  left:8%; z-index: 5; top:4vh;
animation: top 0.5s  backwards ; -webkit-animation: top 0.5s  backwards ;}

.Rotary_bgdiv{width: 80vw; margin: 0 auto; position: relative; z-index: 3; position: fixed; top: calc(4vh + 33vw ) ; left: 10% }
.Rotary_bg{ width:80vw; height: 80vw; margin: 0 auto; position: relative; z-index: 3; }
.Rotary_bg img{ display: block; width: 100%}
.Rotary_zz{ position: absolute; width: 30%; left: 35%; top: 27vw; z-index: 4 }
.Rotary_bt{ width: 80%; display: block; margin: 0 auto; margin-top: -8vw}
.Rotary_btn{ position: fixed; bottom: 4vh; width:50%; left: 25%; z-index: 4}
.Rotary_btn img{display: block; width: 100%}
.popup_Rotary{ width: 80%; border-radius: 10px; border: 4px solid #fed200 ;box-sizing: border-box;}
.popup_close{ background: url(../images/close.png) center center no-repeat; background-size: 100% 100%;
 width: 32px; height: 32px; display: block; position: absolute; right: -12px; top: -16px}
.layer-text01{ color: #ff512c; text-align: center; font-size: 1.25rem; padding: 25px 10px 15px; line-height:2rem}
.popup_btn{ width: 70%; margin: 0 auto 15px;  text-align: center; color: #fff;  overflow: hidden; font-size: 1.25rem}
.popup_btn span{ background-image: linear-gradient(#ffc4d4,#ff5784,#ff5784, #f660a7); display: block; width: 100%; border-radius: 50px;
 margin: 12px 0; height: 40px; display: flex;align-items: center;justify-content: center;}
 .popup_btn span.bor{ background: #fff; border: 1px solid #ff0c4c; color: #ff0c4c ;box-sizing: border-box;}

.layer-result-end{
	background-color: transparent!important;
}

.layer-result-end .layer-bg{
	position: relative;
	width: 96vw;
	max-width: 340px;
}
.layer-result-end .content{
	position: absolute;
    top: 18%;
    left: 6%;
    width: 88%;
    height: 75%;
}
.layer-result-end .content .score{
	text-align: center;
    font-size: 4rem;
    color: #f35b53;
    font-weight: bold;
    padding-bottom: 5px;
    border-bottom: 1px solid #333;
    width: 60%;
    margin: 0 auto;
}
.layer-result-end .content .score span:nth-of-type(2){
	font-size: 14px;
}
.layer-result-end .content .tips{
	color: #888;
	text-align: center;
	margin: 5px 0;
}
.layer-result-end .chance{
	width: 90%;
	position: relative;
	margin: 10px auto;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	margin-top: 30px;
}
.layer-result-end .chance img{
	width: 10vw;
}
.layer-result-end .chance p{
    width: 75%;
    left: 12.5%;
	top: 0;
	text-align: center;
	font-size: 1.3rem;
}
.layer-result-end .chance p span{
	color:#36bdfe
}

.layer-result-end .btn{
	width: 90%;
    margin: 5px 5%;
}
.layer-result-end .btn:active{
	opacity: .7;
}
/* 首页 */
.base.baseIndex{width: 100%;height: 100vh;background: url(../images/bgIndex.jpg) no-repeat;background-size: 100% 100%;overflow: hidden;position: relative;}
.base.baseIndex .logoImg{display: block;margin:4vh auto 2vh;width:45%;}
.base.baseIndex .hdtitleImg{display: block;width: 100%;}
.base.baseIndex .btnFix{width: 100%;position: absolute;bottom: 2.5vh;left:0;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.base.baseIndex .btnFix .rulebtn{padding:3px 15px;background: #c94600;color:#fff;margin-bottom: 10px;font-weight: bolder;font-size: 16px;border-radius: 30px;}
.base.baseIndex .btnFix .onceAnswerbtn{width: 58%;animation: pulse 1s linear infinite alternate;
	-webkit-animation: pulse 1s linear infinite alternate;}

.base.baseIndex .ballFix{position: fixed;bottom: 25%;right:10vw;width: 48px;}
.base.baseIndex .ballFix .ballImg{display: block;width: 45px;margin:0 auto;position: relative;z-index: 2;}
.base.baseIndex .btnItems{padding:20px 5px 2vw;border-radius:40px;background: rgba(255,255,255,0.9);position: relative;margin-top: -10px;}
.base.baseIndex .btnItems a{margin-bottom:2vh;}
.base.baseIndex .btnItems a,.base.baseIndex .btnItems a span{display: block;width: 100%;}
.base.baseIndex .btnItems a img{width: 54%;margin:0 auto 5px;display: block;}
.base.baseIndex .btnItems a span{text-align: center;border-top:1px solid #eb7150;border-bottom:1px solid #eb7150;font-size: 12px;padding:3px 0;font-weight: 600;color: #b60029;}

/*--放大缩小--*/
@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}50%{-webkit-transform:scale3d(1.02, 1.02, 1.02);transform:scale3d(1.02, 1.02, 1.02)}100%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}
@keyframes pulse{0%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}50%{-webkit-transform:scale3d(1.02, 1.02, 1.02);transform:scale3d(1.02, 1.02, 1.02)}100%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}

.base.baseIndex .ruleMain{width: 80%;padding:10px;background: #fed200;border-radius: 10px;box-shadow: 0px 0px 20px rgba(255,255,255,0.6);margin:0 auto;}
.base.baseIndex .ruleMain .ruleContent{background: #fff;padding:10px;max-height: 70vh;overflow: hidden;overflow-y: scroll;color:#ff512c;font-size: 14px;border-radius: 10px;}
.base.baseIndex .ruleMain .ruleContent p{text-align: center;margin:5px 0 15px;font-weight:bold;font-size: 22px;}
.base.baseIndex .ruleMain .ruleContent span{display: block;margin-bottom: 5px;}
.base.baseIndex .closeRule{position: absolute;width: 40px;display: block;top:10px;right: 15px;}

/* 奖品记录 */
.base.baseRecord{padding:0 15px;}
.recordItem{background:#fff;width: 100%;border-radius: 10px;overflow: hidden;height: 30vw;margin-top: 15px;}
.recordItem:after{content: ".";display: block;height: 0;overflow: hidden;visibility: hidden;clear: both;}
.recordItem .itemLeft{width: 32vw;height: 100%;background: url(../images/icon_record.png) no-repeat;background-size: 100% 100%;font-size: 14px;color: #fff;float: left;text-align: center;line-height: 30vw;}
.recordItem .itemLeft b{font-size: 30px;font-weight: 600;}
.recordItem .itemRight{width: calc(100% - 32vw);overflow: hidden;padding:10px;display: flex;flex-direction: column;height: 100%;box-sizing: border-box;float: left;}
.recordItem .itemRight .itemtilte{padding-bottom: 10px;border-bottom: 1px solid #eee;display: flex;align-items: center;justify-content: space-between;}
.recordItem .itemRight .itemtilte .titleName{flex:1;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.getPoupbtn{white-space: nowrap;padding:2px 8px;border: 1px solid #ff3a3a;color:#ff3a3a;border-radius: 50px;}
.getPoupbtn.hasget{background: #c9c8c8;color: #fff;border:1px solid #c9c8c8;}
.recordItem .itemRight .itemDesc{margin-top: 10px;color: #b4b4b4;flex: 1;overflow: hidden;text-overflow: ellipsis;}

.base.baseRecord .ruleMain{width: 80%;padding:10px;background: #fed200;border-radius: 10px;box-shadow: 0px 0px 20px rgba(255,255,255,0.6);margin:0 auto;}
.base.baseRecord .ruleMain .ruleContent{background: #fff;padding:10px;max-height: 70vh;overflow: hidden;overflow-y: scroll;color:#ff512c;font-size: 14px;border-radius: 10px;}
.base.baseRecord .ruleMain .ruleContent p{text-align: center;margin:10px 0 20px;font-weight:bold;font-size: 20px;}
.base.baseRecord .ruleMain .ruleContent span{display: block;margin-bottom: 5px;}
.base.baseRecord .closeRule{position: absolute;width: 40px;display: block;top:10px;right: 15px;}
.base.baseRecord .ruleMain .chekcItem{display: flex;justify-content: center;margin-bottom: 5px;}
.surbtn{width: 30%;text-align: center;padding:10px;margin:20px auto;background: linear-gradient(to right,#f86640,#ff3d3a);color:#fff;border-radius: 30px;}



/*背景音乐*/
.bgm{ position: fixed; top:15px; left: 10px; background:rgba(0,0,0,.5) url(../images/bgm.png) no-repeat center center; background-size: 20px; 
    z-index:10;width: 30px; height: 30px;border-radius: 50px;

 -webkit-animation:music steps(360) 2s infinite;
  animation:music steps(360) 2s infinite;
 -webkit-animation-play-state:running; }

.bgm.stop{animation-play-state:paused;-webkit-animation-play-state:paused; }




@-webkit-keyframes music {
0% {-webkit-transform:rotate(-360deg) ;transform:rotate(-360deg) }

100% {-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}


@media only screen and (max-width:375px) and (max-height: 600px) {
	.page04_title{  top: 2vh;}
	.Rotary_bgdiv{    top: calc(2vh + 33vw );}
}


@media only screen and (max-width:375px) and (min-height: 600px) {

.Rotary_bgdiv{    top: calc(6vh + 33vw );}
}
